<template>
  <view class="wrap-tabbar">
    <view
      class="tabbar-placeholder"
      :style="{ 'padding-bottom': safeBottom + 'rpx' }"
    ></view>
    <view
      class="main"
      v-if="chooseIndex != -1"
      :style="{ 'padding-bottom': safeBottom + 'rpx' }"
    >
      <view
        class="item"
        v-for="(item, index) in tabList"
        :key="{ index }"
        @click="changeTab(index)"
      >
        <image
          class="icon"
          :src="chooseIndex == index ? item.checkImg : item.unCheckImg"
        ></image>
        <view class="text">{{ item.menuTitle }}</view>
      </view>
    </view>
  </view>
</template>
<script>
  import { navigateTo } from '@/utils/tools'
  import { getLocBaseSet } from '@/utils/auth'
  export default {
    props: {},
    methods: {
      changeTab(index) {
        navigateTo(this.tabList[index].pagePath, {}, 'switchTab')
      }
    },
    mounted() {
      console.log('mounted')
    },

    created() {
      // this.safeBottom = Math.abs(uni.getSystemInfoSync().safeAreaInsets.bottom)
      // console.log(
      //   'uni.getSystemInfoSync().safeAreaInsets',
      //   uni.getSystemInfoSync().safeAreaInsets,
      //   this.safeBottom
      // )

      this.tabList = getLocBaseSet().bottomMenu || this.defaultTabList
      this.tabList[0].pagePath = '/pages/index/index'
      this.tabList[1].pagePath = '/pages/ticket/ticket'
      // this.tabList[2].pagePath='/pages/index/index',
      this.tabList[3].pagePath = '/pages/mine/index'
      const discountShowType = getLocBaseSet().discountShowType
      switch (discountShowType) {
        case '-1':
          this.tabList.splice(2, 1)
          break
        case '1':
          this.tabList[2].pagePath = '/pages/mall/mall'
          break
        case '2':
          this.tabList[2].pagePath = '/pages/mall/mallBuyMain'
          break

        default:
          break
      }
      const routes = getCurrentPages()
      const route = routes[routes.length - 1]?.route
      this.chooseIndex = this.tabList.findIndex((item) => {
        return item.pagePath === '/' + route
      })
      console.log('route', route, this.chooseIndex)
      // console.log('this.tabList', this.tabList, discountShowType)
    },
    computed: {
      defaultTabList() {
        return [
          {
            pagePath: '/pages/index/index',
            unCheckImg: '/static/img/tabbar/ticket.png',
            checkImg: '/static/img/tabbar/ticket_select.png',
            menuTitle: '推荐'
          },
          {
            pagePath: '/pages/ticket/ticket',
            unCheckImg: '/static/img/tabbar/cinema.png',
            checkImg: '/static/img/tabbar/cinema_select.png',
            menuTitle: '电影'
          },
          {
            pagePath: '/pages/mall/mall',
            unCheckImg: '/static/img/tabbar/mall.png',
            checkImg: '/static/img/tabbar/mall_select.png',
            menuTitle: '特惠'
          },
          {
            pagePath: '/pages/mine/index',
            unCheckImg: '/static/img/tabbar/my.png',
            checkImg: '/static/img/tabbar/my_select.png',
            menuTitle: '我的'
          }
        ]
      }
    },
    data() {
      return {
        safeBottom: getApp().globalData.safeBottom,
        tabList: [],
        defaultTabList1: [
          {
            pagePath: '/pages/index/index',
            unCheckImg: '/static/img/tabbar/ticket.png',
            checkImg: '/static/img/tabbar/ticket_select.png',
            menuTitle: '推荐'
          },
          {
            pagePath: '/pages/ticket/ticket',
            unCheckImg: '/static/img/tabbar/cinema.png',
            checkImg: '/static/img/tabbar/cinema_select.png',
            menuTitle: '电影'
          },
          {
            pagePath: '/pages/mall/mall',
            unCheckImg: '/static/img/tabbar/mall.png',
            checkImg: '/static/img/tabbar/mall_select.png',
            menuTitle: '特惠'
          },
          {
            pagePath: '/pages/mall/mallBuyMain',
            unCheckImg: '/static/img/tabbar/mall.png',
            checkImg: '/static/img/tabbar/mall_select.png',
            menuTitle: '点餐'
          },
          {
            pagePath: '/pages/mine/index',
            unCheckImg: '/static/img/tabbar/my.png',
            checkImg: '/static/img/tabbar/my_select.png',
            menuTitle: '我的'
          }
        ],
        chooseIndex: -1
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wrap-tabbar {
  }
  .tabbar-placeholder {
    height: 100rpx;
  }
  .main {
    position: fixed;
    z-index: 9999;
    display: flex;
    background-color: white;
    height: 100rpx;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .icon {
        width: 40rpx;
        height: 40rpx;
        margin-bottom: 8rpx;
      }
    }
  }
</style>
